<!DOCTYPE html>
<!-- 下拉框应用 左移 右移 -->

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#add").click(function() {
			var $option = $("#selectLeft option:selected");
			$option = append("#selectRight");
		})
		$("#add_All").click(function() {
			var $option = $("selectLeft option");
			$option = append("#selectRight");
		})
		$("#remove").click(function() {
			var $option = $("selectRight option:selected");
			$option = append("#selectLeft");
		})
		$("#removeAll").click(function() {
			var $option = $("selectRight option");
			$option = append("#selectLeft");
		})
	})
</script>
</head>
<body>
	<table>
		<tr>
			<td><select id="selectLeft" multiple="multiple"
				style="height: 300px; width: 200px">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
					<option>6</option>
					<option>7</option>
					<option>8</option>
					<option>9</option>
			</select></td>
			<td><select id="selectRight" multiple="multiple"
				style="height: 300px; width: 200px"></select></td>
		</tr>
		<tr>
			<td>
				<button id="add">选中添加到右边</button> <br />
				<button id="add_All">选中全部添加到右边</button> <br />
			</td>

			<td>
				<button id="remove_All">选中全部添加到左边</button> <br />
				<button id="remove">选中添加到左边</button>
			</td>
		</tr>
	</table>
</body>
</html>